:root {
  /* Base colors */
  --color-purple-50: hsl(263deg 69% 95%);
  --color-purple-100: hsl(264deg 73% 90%);
  --color-purple-200: hsl(264deg 73% 81%);
  --color-purple-300: hsl(264deg 72% 71%);
  --color-purple-400: hsl(264deg 72% 62%);
  --color-purple-950: hsl(263deg 69% 5%);
  --color-purple-900: hsl(264deg 73% 10%);
  --color-purple-800: hsl(264deg 72% 21%);
  --color-purple-700: hsl(264deg 72% 31%);
  --color-purple-600: hsl(264deg 72% 42%);
  --color-purple-500: hsl(264deg 72% 52%);
  --color-red-950: hsl(344deg 93% 5%);
  --color-red-900: hsl(343deg 93% 11%);
  --color-red-800: hsl(343deg 93% 22%);
  --color-red-700: hsl(343deg 98% 32%);
  --color-red-600: hsl(343deg 100% 43%);
  --color-red-500: hsl(343deg 91% 59%);
  --color-red-400: hsl(343deg 81% 65%);
  --color-red-300: hsl(343deg 79% 73%);
  --color-red-200: hsl(343deg 78% 82%);
  --color-red-100: hsl(342deg 77% 91%);
  --color-red-50: hsl(341deg 73% 96%);
  --color-yellow-950: hsl(57deg 76% 5%);
  --color-yellow-900: hsl(57deg 73% 10%);
  --color-yellow-800: hsl(56deg 72% 21%);
  --color-yellow-700: hsl(56deg 72% 31%);
  --color-yellow-600: hsl(56deg 73% 42%);
  --color-yellow-500: hsl(56deg 73% 52%);
  --color-yellow-400: hsl(56deg 73% 62%);
  --color-yellow-300: hsl(56deg 73% 71%);
  --color-yellow-200: hsl(56deg 73% 81%);
  --color-yellow-100: hsl(57deg 73% 90%);
  --color-yellow-50: hsl(57deg 76% 95%);
  --color-green-950: hsl(95deg 76% 5%);
  --color-green-900: hsl(94deg 73% 10%);
  --color-green-800: hsl(94deg 74% 21%);
  --color-green-700: hsl(94deg 73% 31%);
  --color-green-600: hsl(94deg 73% 42%);
  --color-green-500: hsl(94deg 73% 52%);
  --color-green-400: hsl(94deg 73% 62%);
  --color-green-300: hsl(94deg 73% 71%);
  --color-green-200: hsl(94deg 73% 81%);
  --color-green-100: hsl(94deg 73% 90%);
  --color-green-50: hsl(95deg 76% 95%);
  --color-grey-950: hsl(260deg 22% 8%);
  --color-grey-900: hsl(263deg 21% 17%);
  --color-grey-800: hsl(262deg 21% 33%);
  --color-grey-700: hsl(263deg 21% 50%);
  --color-grey-600: hsl(263deg 21% 66%);
  --color-grey-500: hsl(263deg 21% 83%);
  --color-grey-400: hsl(264deg 21% 86%);
  --color-grey-300: hsl(262deg 22% 90%);
  --color-grey-200: hsl(263deg 22% 93%);
  --color-grey-100: hsl(257deg 37% 96%);
  --color-grey-50: hsl(264deg 38% 97%);

  /************** Colors *****************/
  --white-accent-clr: #fff;
  --popup-bg-clr: hsla(264deg 72% 71% / 30%);

  /* Greyscale colors */
  --greyscale-surface-default: var(--color-grey-100);
  --greyscale-surface-subtle: var(--color-grey-50);
  --greyscale-surface-disabled: var(--color-grey-200);
  --greyscale-border-default: var(--color-grey-400);
  --greyscale-border-disabled: var(--color-grey-300);
  --greyscale-border-darker: var(--color-grey-700);
  --greyscale-text-title: var(--color-grey-900);
  --greyscale-text-body: var(--color-grey-800);
  --greyscale-text-subtitle: var(--color-grey-600);
  --greyscale-text-caption: var(--color-grey-500);
  --greyscale-text-negative: var(--color-grey-50);
  --greyscale-text-disabled: var(--color-grey-400);

  /* Primary colors */
  --primary-surface-subtle: var(--color-purple-50);
  --primary-surface-lighter: var(--color-purple-300);
  --primary-surface-default: var(--color-purple-500);
  --primary-surface-darker: var(--color-purple-700);
  --primary-border-subtle: var(--color-purple-100);
  --primary-border-lighter: var(--color-purple-300);
  --primary-border-default: var(--color-purple-500);
  --primary-border-darker: var(--color-purple-700);
  --primary-text-label: var(--color-purple-700);

  /* Warning colors */
  --warning-surface-subtle: var(--color-yellow-50);
  --warning-surface-lighter: var(--color-yellow-300);
  --warning-surface-default: var(--color-yellow-500);
  --warning-surface-darker: var(--color-yellow-700);
  --warning-border-subtle: var(--color-yellow-100);
  --warning-border-lighter: var(--color-yellow-300);
  --warning-border-default: var(--color-yellow-500);
  --warning-border-darker: var(--color-yellow-700);
  --warning-text-label: var(--color-yellow-700);

  /* Error colors */
  --error-border-subtle: var(--color-red-100);
  --error-border-lighter: var(--color-red-300);
  --error-border-default: var(--color-red-500);
  --error-border-darker: var(--color-red-700);
  --error-surface-subtle: var(--color-red-50);
  --error-surface-lighter: var(--color-red-300);
  --error-surface-default: var(--color-red-500);
  --error-surface-darker: var(--color-red-700);
  --error-text-label: var(--color-red-700);

  /* Success colors */
  --success-surface-subtle: var(--color-green-50);
  --success-surface-lighter: var(--color-green-300);
  --success-surface-default: var(--color-green-500);
  --success-surface-darker: var(--color-green-700);
  --success-border-subtle: var(--color-green-100);
  --success-border-lighter: var(--color-green-300);
  --success-border-default: var(--color-green-500);
  --success-border-darker: var(--color-green-700);
  --success-text-label: var(--color-green-700);

  /* gradients */
  --clr-bg-sidebar-light: linear-gradient(180deg, #836fde 0%, #9289fc 100%);
  --clr-bg: var(--greyscale-surface-subtle);

  /* Sizes 2X */
  --size-base: 2px;
  --size-2xs: 4px;
  --size-xs: 6px;
  --size-sm: 8px;
  --size-md: 12px;
  --size-lg: clamp(0.875rem, 0.835rem + 0.19vw, 1rem); /* 16 - 14 */
  --size-xl: clamp(1rem, 0.92rem + 0.38vw, 1.25rem); /* 18 - 16 */
  --size-2xl: clamp(1rem, 0.84rem + 0.75vw, 1.5rem); /* 20 - 18 */
  --size-3xl: clamp(1.125rem, 0.844rem + 1.32vw, 2rem); /* 24 - 18 */
  --size-4xl: clamp(1.5rem, 1.259rem + 1.13vw, 2.25rem); /* 36 - 24 */
  --size-5xl: clamp(2rem, 1.759rem + 1.13vw, 2.75rem); /* 44 - 32 */
  --size-6xl: clamp(2.75rem, 2.349rem + 1.89vw, 4rem); /* 64 - 44 */
  --size-full: 999px;

  /***********  RADIUS *************/

  /* Radius */
  --radius-2xs: var(--size-2xs);
  --radius-xs: var(--size-xs);
  --radius-sm: var(--size-sm);
  --radius-md: var(--size-md);
  --radius-lg: var(--size-lg);
  --radius-xl: var(--size-3xl);
  --radius-2xl: var(--size-6xl);
  --radius-full: var(--size-full);

  /* ***********************************  */

  /***********  PADDINGS  *************/

  /* H-Padding */
  --h-padding-xs: var(--size-sm);
  --h-padding-sm: var(--size-lg);
  --h-padding-md: var(--size-xl);
  --h-padding-lg: var(--size-2xl);
  --h-padding-xl: var(--size-6xl);

  /* V-Padding */
  --v-padding-xxs: var(--size-2xs);
  --v-padding-xs: var(--size-xs);
  --v-padding-sm: var(--size-sm);
  --v-padding-md: var(--size-md);
  --v-padding-lg: var(--size-lg);
  --v-padding-xl: var(--size-2xl);

  /* Full Padding */
  --full-padding-xs: var(--size-2xs);
  --full-padding-sm: var(--size-sm);
  --full-padding-md: var(--size-md);
  --full-padding-lg: var(--size-lg);
  --full-padding-xl: var(--size-2xl);

  /* ***********************************  */

  /***********  AVATAR SIZE  *************/

  --avatar-sm: var(--size-3xl);
  --avatar-md: var(--size-6xl);
  --avatar-lg: var(--size-6xl);

  /* ***********************************  */

  /************* SPACES ******************/

  --gap-xs: var(--size-2xs);
  --gap-sm: var(--size-sm);
  --gap-md: var(--size-md);
  --gap-main: clamp(0.5rem, 0.327rem + 0.77vw, 1rem);
  --gap-lg: clamp(0.75rem, 0.62rem + 0.58vw, 1.125rem);
  --gap-xl: clamp(1rem, 0.87rem + 0.58vw, 1.375rem);
  --gap-2xl: clamp(1.125rem, 0.779rem + 1.54vw, 2.125rem);
  --gap-3xl: clamp(1.25rem, 0.817rem + 1.92vw, 2.5rem);

  /* ***********************************  */

  /* Shadows */
  --shadow-xs: 0 2px 4px 0 rgb(22 7 44 / 16%);
  --shadow-sm: 0 2px 4px 0 rgb(22 7 44 / 4%), 0 16px 32px -4px rgb(22 7 44 / 10%);
  --shadow-md: 0 2px 4px 0 rgb(22 7 44 / 4%), 0 24px 46px -8px rgb(22 7 44 / 12%);
  --shadow-lg: 0 2px 4px 0 rgb(22 7 44 / 4%), 0 40px 80px -16px rgb(22 7 44 / 16%);
  --shadow-xl: 0 2px 4px 0 rgb(22 7 44 / 4%), 0 56px 112px -20px rgb(22 7 44 / 18%);
  --shadow-hover: 0 16px 12px 2px rgb(142 130 244 / 15%);
  --shadow-skeleton: 0 4px 12px 1px rgb(34 139 207 / 25%);

  /* sidebar width */
  --sidebar-width: 255px;
  --collapse-width: 60px;

  /* font family */
  --ff-main: 'IBM Plex Sans', sans-serif;
  --ff-heading: 'Fira Sans Condensed', sans-serif;

  /* font weight */

  --fw-semibold: 600;
  --fw-medium: 500;
  --fw-regular: 400;
  --fw-light: 300;

  /* Line height */

  --lh-xs: 16px;
  --lh-sm: 20px;
  --lh-md: 24px;
  --lh-lg: 28px;
  --lh-xl: 34px;
  --lh-2xl: 52px;
  --lh-3xl: 64px;
  --lh-4xl: 84px;

  /* font size */
  --fs-4xl: var(--size-6xl); /* 88 - 44 */
  --fs-3xl: var(--size-5xl); /* 44 - 32 */
  --fs-2xl: var(--size-4xl); /* 36 - 24 */
  --fs-xl: var(--size-3xl); /* 24 - 18 */
  --fs-lg: var(--size-2xl); /* 20 - 18 */
  --fs-md: var(--size-xl); /* 18 - 16 */
  --fs-main: var(--size-lg); /* 16 - 14 */
  --fs-sm: 14px;
  --fs-xs: 12px;
  --fs-2xs: 10px;

  /* Heading font regular  */
  --font-h1-regular: var(--fw-regular) var(--fs-4xl) / var(--lh-4xl) var(--ff-heading);
  --font-h2-regular: var(--fw-regular) var(--fs-3xl) / var(--lh-3xl) var(--ff-heading);
  --font-h3-regular: var(--fw-regular) var(--fs-2xl) / var(--lh-2xl) var(--ff-heading);
  --font-h4-regular: var(--fw-regular) var(--fs-lg) / var(--lh-xl) var(--ff-heading);
  --font-h5-regular: var(--fw-regular) var(--fs-md) / var(--lh-lg) var(--ff-heading);
  --font-h6-regular: var(--fw-regular) var(--fs-main) / var(--lh-md) var(--ff-heading);

  /* Heading font medium  */
  --font-h1-medium: var(--fw-medium) var(--fs-4xl) / var(--lh-4xl) var(--ff-heading);
  --font-h2-medium: var(--fw-medium) var(--fs-3xl) / var(--lh-3xl) var(--ff-heading);
  --font-h3-medium: var(--fw-medium) var(--fs-2xl) / var(--lh-2xl) var(--ff-heading);
  --font-h4-medium: var(--fw-medium) var(--fs-lg) / var(--lh-xl) var(--ff-heading);
  --font-h5-medium: var(--fw-medium) var(--fs-md) / var(--lh-lg) var(--ff-heading);
  --font-h6-medium: var(--fw-medium) var(--fs-main) / var(--lh-md) var(--ff-heading);

  /* Heading font semibold */
  --font-h1-semibold: var(--fw-semibold) var(--fs-4xl) / var(--lh-4xl) var(--ff-heading);
  --font-h2-semibold: var(--fw-semibold) var(--fs-3xl) / var(--lh-3xl) var(--ff-heading);
  --font-h3-semibold: var(--fw-semibold) var(--fs-2xl) / var(--lh-2xl) var(--ff-heading);
  --font-h4-semibold: var(--fw-semibold) var(--fs-lg) / var(--lh-xl) var(--ff-heading);
  --font-h5-semibold: var(--fw-semibold) var(--fs-md) / var(--lh-lg) var(--ff-heading);
  --font-h6-semibold: var(--fw-semibold) var(--fs-main) / var(--lh-md) var(--ff-heading);

  /* Body font */
  --font-body-primary: var(--fw-regular) var(--fs-main) var(--ff-main);
  --font-body-secondary: var(--fw-regular) var(--fs-md) var(--ff-main);

  /* Button and Link font */
  --font-bl-large: var(--fw-regular) var(--fs-lg) / var(--lh-lg) var(--ff-main);
  --font-bl-medium: var(--fw-regular) var(--fs-md) / var(--lh-md) var(--ff-main);
  --font-bl-regular: var(--fw-regular) var(--fs-main) / var(--lh-md) var(--ff-main);
  --font-bl-small: var(--fw-regular) var(--fs-sm) / var(--lh-sm) var(--ff-main);
  --font-bl-extrasmall: var(--fw-regular) 12px var(--ff-main);

  /* Status and Tags font */
  --font-placeholder: var(--fw-regular) var(--fs-main) var(--ff-main);
  --font-statuses: var(--fw-regular) var(--fs-sm) var(--ff-main);
  --font-tags: var(--fw-regular) var(--fs-xs) var(--ff-main);
}
